import { Col, Row, Tooltip } from 'antd';
import React from 'react';
import NumberCard from './NumberCard'

const topColResponsiveProps = {
  style: {
    marginBottom: 24,
    flex:1
  },
};

const IntroduceRow = ({ loading, visitData }) => (
  <Row gutter={24} type="flex">
    <Col {...topColResponsiveProps}>
      <NumberCard
        title="入职人数"
        loading={loading}
        total={visitData.numEntryYear}
        count={visitData.numEntryMonth}
        color="#FE60AE"
        background={require('@/assets/ruzhirenshu.png')}
      >
      </NumberCard>
    </Col>

    <Col {...topColResponsiveProps}>
      <NumberCard
        title="转正人数"
        loading={loading}
        total={visitData.numRegularYear}
        count={visitData.numRegularMonth}
        color="#FDA23F"
        background={require('@/assets/zhuanzhengrenshu.png')}
      >
      </NumberCard>
    </Col>
    <Col {...topColResponsiveProps}>
      <NumberCard
        title="调出人数"
        loading={loading}
        total={visitData.numExportYear}
        count={visitData.numExportMonth}
        color="#D78AFD"
        background={require('@/assets/tiaochurenshu.png')}
      >
      </NumberCard>
    </Col>
    <Col {...topColResponsiveProps}>
      <NumberCard
        title="离职人数"
        loading={loading}
        total={visitData.numDimissionYear}
        count={visitData.numDimissionMonth}
        color="#43E794"
        background={require('@/assets/lizhirenshu.png')}
      >
      </NumberCard>
    </Col>
    <Col {...topColResponsiveProps}>
      <NumberCard
        title="实习人数"
        loading={loading}
        total={visitData.numInternshipYear}
        count={visitData.numInternshipMonth}
        color="#FF7E7F"
        background={require('@/assets/shixirenshu.png')}
      >
      </NumberCard>
    </Col>
  </Row>
);

export default IntroduceRow;
